<template>
	<view>
		<navbar  title="店铺选址" :isGoBack="true" :isNotice="true" ></navbar>		
		<view class="opinion_wrap">
		  <form bindsubmit="formSubmit">
		      <view class="content_wrap">
		          <view class="content">
		              <textarea v-model="content"  maxlength="50"  auto-height placeholder-class="placeholder" placeholder="填写选择店铺的原因" />
		             <!-- <van-uploader file-list="{{ fileList }}"  accept="image" max-count="9" multiple bind:after-read="afterRead" bind:delete="deleteImg"  preview-size="{{(width+50)/4 }}" /> -->
					 <u-upload	:fileList="fileList" @afterRead="afterRead" @delete="deleteImg" 		name="1" 		multiple		:maxCount="10"	></u-upload>
		          </view>
		      </view>  
		      <view class="phone">
		          <input  v-model="address"  placeholder-class="placeholder" placeholder="请留下您的选择地铺的地址" />
		      </view>
		      <view class="phone">
		          <input v-model="realname"  placeholder-class="placeholder" placeholder="请留下您的姓名，方便我们及时回复" />
		      </view>
		      <view class="phone">
		          <input v-model="phone"     placeholder-class="placeholder" placeholder="请留下您的手机号，方便我们及时回复" />
		      </view>
		      <button @click="submit">提交</button>
		  </form>
		</view>
	</view>
	
</template>

<script>	
    import config from '@/utils/config.js';
	export default {
		data() {
			return {
				fileList:[],
				content:"",
				address:"",
				realname:"",
				phone:"",
				
				
			}
		},
		methods:{
			async  afterRead(event) {
			    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					if(result.success){
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
						 uni.showToast({ title: '上传成功', icon: 'none' })
					}else{
						this.fileList.splice(fileListLen, 1)
					}					
				}
			    
			  },
			  
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.api_url+'/api/index/uploadImage', // 仅为示例，非真实的接口地址,换成自己上传图片的接口
						filePath: url,
						name: 'file',
						success: (uploadRes) => {
							setTimeout(()=>{
								let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式								
								resolve({success:true,url:res.data.image})
							},2000)
							
						}
					});
				})
			},			
			  /* 删除图片*/
			deleteImg(event) {
			    var image_index = event.index
			    var fileList_new = this.fileList;
			    fileList_new.splice(image_index,1);
			    this.fileList=fileList_new
			},
			
			submit(){
				let _that = this;
				let address = this.address;
				let realname = this.realname;
				let phone = this.phone;
				let content = this.content;
				if (content == "") {
				  uni.showToast({
					title: '填写选择店铺的原因！',
					icon:"none"
				  })
				  return false
				}
				
				if (address == "") {
				  uni.showToast({
					title: '请留下您的选择地铺的地址!',
					icon:"none"
				  })
				  return false
				}
				
				if(realname == "") {
				  uni.showToast({
					title: '请留下您的姓名!',
					icon:"none"
				  })
				  return false
				}
				
				if(phone == "") {
				  uni.showToast({
					title: '请留下您的手机号!',
					icon:"none"
				  })
				  return false
				}
				
				let images=[];
				let fileList=this.fileList
				for(let i=0;i<fileList.length;i++){					
					if(fileList[0].url.url) images.push({url:fileList[0].url.url})
				}
								
				if(images.length<=0){
					uni.showToast({
						title: '请上传图片!',
						icon:"none"
					})
					return false
				}				
				
				let obj_data={
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					content,
					fileList:JSON.stringify(images),
					address,
					realname,
					phone,
				}
				
				this.$http.doSelectShop(obj_data).then(res=>{
					if(res.resCode=="9999"){
						uni.showToast({title:res.resMessage,icon:"none"})
						setTimeout(function(){
						    uni.switchTab({
						        url: '/pages/mine/index',
							})
						},3000)
					}
				})  				
			}			
		}
	}
</script>

<style>
	/* pagesUser/cooperate/index.wxss *//* pages/feedback/feedback.wxss */
	page{
	  background-color: white;
	}
	.content_wrap, .phone{
	  width: 96%;
	  background-color: #fff;
	  border-radius: 10rpx;
	  margin: 20rpx auto;
	  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 8%);
	}
	.content{
	  padding: 20rpx;
	  margin: 0 auto;
	  border-radius: 10rpx;
	}
	textarea{
	  min-height: 300rpx;
	  width: 100%;
	}
	input{
	  margin-top: 30rpx;
	  height: 100rpx;
	  padding-left: 20rpx;
	  background-color: #fff;
	}
	button{
	color: white;
	border: none;
	width: 85%;
	padding: 10rpx 0rpx;
	margin: 40rpx auto;
	background: #2b85e4;
	border-radius: 40rpx;
	font-size: 30rpx;
	}
	
	.button_active{
	background: #5cadff;
	}
	.placeholder{
	  color: #b6b6b6;
	  font-size: 14px;
	}

</style>